<script setup>

import router from "../../../router";

import MyNav from "../../../components/MyNav.vue";

import MyHead from "../../../components/MyHead.vue";

import MyTable from "../../../components/MyTable.vue";

import MyPager from "../../../components/MyPager.vue";

import {ElMessage} from "element-plus";

import {MINIO_AVATAR} from "../../../const/index.js";

import {onMounted, reactive, ref} from "vue";

import {deleteApi, deleteBatchApi, pageApi} from "../../../util/axios.js";

import {getResponseData, myPage} from "../../../util/request.js";

import {isNotEmpty, isNotNull} from "../../../util/index.js";

import {notYet} from "../../../util/index.js";

import {genderFormat} from "../../../util/project.js";

import {resetPasswordApi} from "../../../api/ums/user.js";

import {elConfirm} from "../../../util/element.js";



/* ==================== 页面常量 ==================== */



// 路径导航

const navItems = [

  {icon: 'User', label: '用户管理'},

  {icon: 'User', label: '用户列表'},

];



// 页面头

const headItems = [

  {type: 'ipt', span: 5, placeholder: '按账号搜索', callback: pageLikeUsername},

  {type: 'ipt', span: 5, placeholder: '按昵称搜索', callback: pageLikeNickname},

  {type: 'ipt', span: 5, placeholder: '按手机搜索', callback: pageLikePhone},

]



// 表格列

const columns = [

  {

    label: ['基本信息', '头像'], prop: 'avatar', type: 'img',

    minio: MINIO_AVATAR, tooltip: false, sortable: false,

  },

  {

    label: ['基本信息', '性别'], prop: 'gender', type: 'tag',

    format: genderFormat, width: 80,

    tagTypeFn: e => e === 0 ? 'warning' : 'primary'

  },

  {label: ['基本信息', '昵称'], prop: 'nickname'},

  {label: ['账号信息', '账号'], prop: 'username'},

  {label: ['账号信息', '手机'], prop: 'phone', width: 100},

  {label: ['账号信息', '邮件'], prop: 'email'},

  {label: ['实名信息', '姓名'], prop: 'realname', width: 80},

  {label: ['实名信息', '身份证号'], prop: 'idcard'},

  {label: ['其他信息', '年龄'], prop: 'age', width: 80},

  {label: ['其他信息', '星座'], prop: 'zodiac', type: 'tag', width: 80},

  {label: ['其他信息', '籍贯'], prop: 'province', type: 'tag', width: 100},

  {label: ['其他信息', '描述'], prop: 'info', type: 'card', tooltip: false},

];



// 表格按钮

const buttons = [

  {label: '角色列表', type: 'success', callback: userRoles},

  {label: '换绑手机', type: 'primary', callback: notYet},

  {label: '重置密码', type: 'danger', callback: resetPassword}

];



/* ==================== 分页查询 ==================== */



// 表格数据 + 分页数据

let records = ref();

let pageInfo = reactive({pageNum: 1, pageSize: 5, callback: page});

// 分页查询条件字段：账号，昵称，手机

let username = ref();

let nickname = ref();

let phone = ref();



/**

 * 分页查询记录

 *

 * 1. 定义分页基础配置，包括 records, pageInfo, api, params 等。

 * 2. 附加分页查询条件，如账号，昵称，手机号码等。

 * 3. 异步发送分页查询请求。

 *

 * @param pageNum 当前第几页，默认 1

 * @param pageSize 每页多少条，默认 5

 */

async function page(pageNum = pageInfo['pageNum'],

                    pageSize = pageInfo['pageSize']) {



  // 分页基础配置

  let config = {

    records, pageInfo,

    args: {module: 'user'},

    api: pageApi,

    params: {pageNum, pageSize},

  }



  // 附加为分页条件

  if (isNotEmpty(username.value)) config['params']['username'] = username.value;

  if (isNotEmpty(nickname.value)) config['params']['nickname'] = nickname.value;

  if (isNotEmpty(phone.value)) config['params']['phone'] = phone.value;



  // 发送分页请求

  await myPage(config);

}



/* ==================== 按登录账号模糊查询 ==================== */



/**

 * 若输入框有值，或者当前正处于按条件分页状态时，进行操作：

 *

 * <p> 1. 将输入框中的值赋值给分页条件字段变量。

 * <p> 2. 重新发送分页请求。

 *

 * @param val 输入框中的值

 */

function pageLikeUsername(val) {



  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求

  if (isNotNull(val) || username.value) {

    username.value = val;

    page();

  }

}



/* ==================== 按用户昵称模糊查询 ==================== */



/**

 * 若输入框有值，或者当前正处于按条件分页状态时，进行操作：

 *

 * <p> 1. 将输入框中的值赋值给分页条件字段变量。

 * <p> 2. 重新发送分页请求。

 *

 * @param val 输入框中的值

 */

function pageLikeNickname(val) {



  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求

  if (isNotNull(val) || nickname.value) {

    nickname.value = val;

    page();

  }

}



/* ==================== 按手机号码模糊查询 ==================== */



/**

 * 若输入框有值，或者当前正处于按条件分页状态时，进行操作：

 *

 * <p> 1. 将输入框中的值赋值给分页条件字段变量。

 * <p> 2. 重新发送分页请求。

 *

 * @param val 输入框中的值

 */

function pageLikePhone(val) {



  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求

  if (isNotNull(val) || phone.value) {

    phone.value = val;

    page();

  }

}



/* ==================== 重置密码 ==================== */



async function resetPassword(row) {

  if (!await elConfirm('正在重置密码，确认吗？')) return;

  let data = getResponseData(await resetPasswordApi(row['id']));

  if (isNotNull(data)) {

    ElMessage.success('密码重置为 123456789');

  }

}



/* ==================== 角色列表 ==================== */



function userRoles(row) {

  sessionStorage.setItem('userId', row['id']);

  sessionStorage.setItem('nickname', row['nickname'].toString());

  router.push('/UserRoles')

}



/* ==================== 加载函数 ==================== */



onMounted(() => page());



</script>



<template v-if="records">

  <my-nav :items="navItems"/>

  <my-head :items="headItems"/>

  <my-table module="user"

            insert-page="/UserInsert"

            update-page="/UserUpdate"

            :delete-api="deleteApi"

            :delete-batch-api="deleteBatchApi"

            :delete-callback="page"

            :excel-api="notYet"

            :records="records"

            :columns="columns"

            :buttons="buttons"/>

  <my-pager :page-info="pageInfo"/>

</template>



<style scoped lang="scss">



</style>